.cloud-content {
	flex-direction: column;

	@include sm-and-up {
		flex-direction: row;
	}
}

.cloud-sidebar {
	background-color: unset;
	padding: 0;

	@include sm-and-up {
		width: 275px;
		background-color: var(--mantine-color-body);
		padding: var(--mantine-spacing-md);
		border-radius: var(--mantine-radius-lg);
	}
}

.open-navigation {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-origin: border-box;
}

.splash-image-container {
	position: absolute;
	bottom: -16px;
	left: 0;
	right: 0;
	height: 333px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.splash-image {
	animation: splash-image 1s cubic-bezier(0.505, 0.160, 0.390, 0.825);
	animation-delay: .1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.onboarding-dialog {
	position: relative;

	:global(.mantine-Modal-header) {
		padding-bottom: 0;
		background: none;
	}

	:global(.mantine-Modal-body) {
		position: relative;
	}

	&::before {
		content: "";
		inset: 0;
		z-index: 0;
		position: absolute;
		background-image: var(--image);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 900px;
		opacity: 0.25;
	}
}

@keyframes splash-image {
	0% {
		opacity: 0;
		transform: translate(0, 25px);
	}

	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}